<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DICT</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
 -->
<link rel="stylesheet" href="${APP_PATH}/static/common/css/base.css">
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/bootstrap-validator/dist/css/bootstrap-validator.css"/>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/bootstrap-treeview/bootstrap-treeview.min.css" />
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/select2/select2.min.css">
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/iCheck/all.css">
<!-- 
<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7/plugins/datatables/select.bootstrap.min.css">
 -->
</head>
<body>
	<!-- Main content -->
	<div class="row">
		<div class="col-md-3">
			<!-- Profile Image -->
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div id="tree"></div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>
		<!-- /.col -->
		<div class="col-md-9">
			<div class="box box-primary">
				<div class="box-header with-border">
					<div class="btn-group">
					    <button type="button" class="btn btn-default glyphicon glyphicon-plus" name="addRoot">&nbsp;新增根字典</button>
						<button type="button" class="btn btn-default glyphicon glyphicon-plus" name="add">&nbsp;新增下级字典</button>
						<button type="button" class="btn btn-default glyphicon glyphicon-edit" name="edit">&nbsp;编辑当前字典</button>
						<button type="button" class="btn btn-default glyphicon glyphicon-remove" name="delete">&nbsp;删除当前字典</button>
					</div>
					<!-- /.box-tools -->
				</div>
				<br>
				<!-- /.box-header -->
				<div class="box-body">
					<form class="form-horizontal" id="dict-form">
					    <input type="hidden" id="id" name="id"/>
						<input type="hidden" id="parentId" name="parentId"/>
						<div class="form-group">
							<label for="parentName" class="col-sm-2 control-label">上级</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" disabled="disabled" id="parentName" name="parentName" placeholder="上级">
							</div>
						</div>

						<div class="form-group">
							<label for="name" class="col-sm-2 control-label">名称</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="name" name="name" placeholder="名称">
							</div>
						</div>
						<div class="form-group">
							<label for="code" class="col-sm-2 control-label">编码</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="code" name="code" placeholder="编码">
							</div>
						</div>
						<div class="form-group">
							<label for="levelCode" class="col-sm-2 control-label">层级编码</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="levelCode" name="levelCode" placeholder="层级编码">
							</div>
						</div>
						<div class="form-group">
							<label for="value" class="col-sm-2 control-label">值</label>

							<div class="col-sm-9">
								<input type="text" class="form-control" id="value" name="value" placeholder="值">
							</div>
						</div>
						<div class="form-group">
							<label  class="col-sm-2 control-label">是否可用</label>
							<div class="col-sm-9">
								<label class="control-label"> <input type="radio" name="deleted" class="flat-red" checked="checked"
									value="0"> 启用
								</label> &nbsp;&nbsp;&nbsp; <label class="control-label"> <input type="radio" name="deleted" class="flat-red"
									value="1"> 禁用
								</label>
							</div>
						</div>
						<div class="form-group">
							<label for="remark" class="col-sm-2 control-label">说明</label>

							<div class="col-sm-9">
								<textarea class="form-control" id="remark" name="remark" placeholder="说明"></textarea>
							</div>
						</div>
	                    <div class="box-footer" style="display:none">
							<div class="text-center">
								<button type="button" class="btn btn-default" name="cancel">&nbsp;取消</button>
								<button type="submit" class="btn btn-primary">&nbsp;保存</button>
							</div>
						</div>
					</form>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /. box -->
		</div>
	</div>
	<!-- /.row -->

</body>
	
	
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="${APP_PATH}/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/bootstrap-3.3.7/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script>
<script src="${APP_PATH}/static/bootstrap-3.3.7/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script src="${APP_PATH}/static/bootstrap-3.3.7/plugins/iCheck/icheck.min.js"></script>
<!--select2-->
<script src="${APP_PATH}/static/bootstrap-3.3.7/plugins/select2/select2.full.min.js"></script>

<script type="text/javascript" src="${APP_PATH}/static/common/js/base.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/common/js/base-modal.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/common/js/base-form.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/common/js/base-datasource.js"></script>

<!-- dataTable
<script src="${APP_PATH }/static/bootstrap-3.3.7/plugins/datatables/jquery.dataTables.js"></script>
<script	src="${APP_PATH }/static/bootstrap-3.3.7/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${APP_PATH }/static/common/js/dataTables.js"></script>
 -->
<!-- 加入页面的的脚本 -->
<script type="text/javascript">
	var form =null;
	$(function() {
		//初始化form表单
		form=$("#dict-form").form();
	
		initTree(0); 
		//初始化校验
		$("#dict-form").bootstrapValidator({
			message : '请输入有效值',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			submitHandler : function(validator, dictform, submitButton) {
				modals.confirm('确认保存？', function() {
					//Save Data，对应'submit-提交'
					var params = JSON.stringify(form.getFormSimpleData());
					$.ajax({  
					    type: "POST",  
					    contentType:"application/json",  
					    url: "${APP_PATH}/dict/save",  
					    data: params,  
					    success: function(data){  
					    	var selectedArr=$("#tree").data("treeview").getSelected();
							var selectedNodeId=selectedArr.length>0?selectedArr[0].nodeId:0;
						    initTree(selectedNodeId); 
					    }  
					}); 
					
				});
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : '请输入名称'
						}
					}
				},
				code : {
					validators : {
						notEmpty : {
							message : '请输入编码'
						}
					}
				},
				levelCode : {
					validators : {
						notEmpty : {
							message : '请输入层级编码'
						}
					}
				},
				deleted : {
					validators : {
						notEmpty : {
							message : '请选择是否可用'
						}
					}
				}
			}
		});
	
		form.initComponent();
		//按钮事件
		var btntype=null;
		$('button[name]').click(function() {
			var action = $(this).attr('name');
			var selectedArr=$("#tree").data("treeview").getSelected();
			var selectedNode=selectedArr.length>0?selectedArr[0]:null;
			console.log(selectedNode);
			switch (action) {
			case 'addRoot':
				formWritable(action);
				form.clearForm();
				//填充上级字典和层级编码
				fillParentAndLevelCode(null);
				btntype='add';
				break; 
			case 'add':
				if(!selectedNode){
					modals.info('请先选择上级字典');
					return false;
				}
				formWritable(action);
				form.clearForm();
				//填充上级字典和层级编码
				fillParentAndLevelCode(selectedNode);
				btntype='add';
				break;
			case 'edit':
				if(!selectedNode){
					modals.info('请先选择要编辑的节点');
					return false;
				}
				if(btntype=='add'){
					fillDictForm(selectedNode);
				}
				formWritable(action);
				btntype='edit';
				break;
			case 'delete':
				if(!selectedNode){
					modals.info('请先选择要删除的节点');
					return false;
				}
				if(btntype=='add')
					fillDictForm(selectedNode);
				formReadonly();
				$(".box-header button[name='delete']").removeClass("btn-default").addClass("btn-primary");
			    if(selectedNode.nodes){
			    	modals.info('该节点含有子节点，请先删除子节点');
			    	return false;
			    }
			    modals.confirm('是否删除该节点',function(){
			    	ajaxPost("${APP_PATH}/dict/delete/"+selectedNode.id,null,function(data){
			    		if(data.success){
			    		    modals.correct('删除成功');	
			    		}else{
			    			modals.info(data.message);
			    		}
			    		
			    	});
			    	//定位
		    		var brothers=$("#tree").data("treeview").getSiblings(selectedNode);
		    		if(brothers.length>0) 
		    		   initTree(brothers[brothers.length-1].nodeId);
		    		else{
		    		   var parent=$("#tree").data("treeview").getParent(selectedNode);
		    		   initTree(parent?parent.nodeId:0); 
		    		}
			    });
				break;
			case 'cancel':  
				if(btntype=='add')
					fillDictForm(selectedNode);
				formReadonly();
				break;
			}
		});
	})
	
	function initTree(selectNodeId){
		var treeData = null;
		var treelength=0;
		ajaxPost("${APP_PATH}/dict/treeData", null, function(data) {
			treeData = data;
			treelength=treeData.length;
		});
		console.log(treeData);
		
		$("#tree").treeview({
			data : treeData,
			showBorder : true,
			expandIcon : "glyphicon glyphicon-stop",
			collapseIcon : "glyphicon glyphicon-unchecked",
			levels : 1,
			onNodeSelected : function(event, data) {
				fillDictForm(data);
				formReadonly();
			}
		});
		
		if(treelength==0){
			return;
		}
		
		//默认选中第一个节点 
		selectNodeId=selectNodeId||0;
		$("#tree").data('treeview').selectNode(selectNodeId);
		$("#tree").data('treeview').expandNode(selectNodeId);
		$("#tree").data('treeview').revealNode(selectNodeId);
		
	}
	
	
	//新增时，带入父级字典名称id,自动生成levelcode
	function fillParentAndLevelCode(selectedNode){
		$("input[name='parentName']").val(selectedNode?selectedNode.text:'系统字典');
	    $("input[name='deleted'][value='0']").prop("checked","checked");  
	    if(selectedNode){
	    	$("input[name='parentId']").val(selectedNode.id);
			var nodes=selectedNode.nodes;
			var levelCode=nodes?nodes[nodes.length-1].levelCode:null;
			$("input[name='levelCode']").val(getNextCode(selectedNode.levelCode,levelCode,6));
	    }else{
	    	var brothers=$("#tree").data("treeview").getSiblings(0);
	    	var levelCode="000000";
	    	if(brothers&&brothers.length>0)
	    	   levelCode=brothers[brothers.length-1].levelCode;
	    	$("input[name='levelCode']").val(getNextCode("",levelCode,6));    	
	    }
	}
	
	//填充form
	function fillDictForm(node){
		form.clearForm();
		ajaxPost("${APP_PATH}/dict/get/"+node.id,null,function(data){
			form.initFormData(data);
		})
	}
	
	//设置form为只读
	function formReadonly(){
		//所有文本框只读
		$("input[name],textarea[name]").attr("readonly","readonly");
		//隐藏取消、保存按钮
		$("#dict-form .box-footer").hide();
		//还原新增、编辑、删除按钮样式
		$(".box-header button").removeClass("btn-primary").addClass("btn-default");
		//还原校验框
		if($("#dict-form").data('bootstrapValidator'))
		 	$("#dict-form").data('bootstrapValidator').resetForm();
	}
	
	function formWritable(action){
		$("input[name],textarea[name]").removeAttr("readonly");
		$("#dict-form .box-footer").show();
		$(".box-header button").removeClass("btn-primary").addClass("btn-default");
		if(action)
			$(".box-header button[name='"+action+"']").removeClass("btn-default").addClass("btn-primary");
	}
</script>
</html>